<template>
  <el-dialog title="修改权限"
             :close-on-click-modal="false"
             :visible.sync="dialogVisible"
             width="390px">
    <div v-loading="loading">
      <el-alert title="删除按钮权限后，点击【保存】按钮才会生效！"
                style="margin-bottom:10px"
                type="warning"
                :closable="false"
                show-icon>
      </el-alert>
      <ul class="btn-list">
        <li class="btn-list-item"
            v-for="item in btnList"
            :key="item.funcId">
          <span class="btn-name">权限：{{item.funcName}}</span>
          <el-button class="del-btn"
                     type="text"
                     @click="delBtnAuth(item)">删除</el-button>
        </li>
      </ul>
      <div class="no-data"
           v-show="btnList.length==0">暂无权限</div>
    </div>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
      <el-button type="primary"
                 @click="submit">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'EditAuth',
  data() {
    return {
      dialogVisible: false,
      loading: false,
      rowData: null,
      btnList: [], // 按钮权限集合
      delBtnList: [], // 删除按钮权限集合
    }
  },
  methods: {
    open(rowData) {
      this.btnList = [];
      this.delBtnList = [];
      this.rowData = { ...rowData };
      this.dialogVisible = true;
      // console.log(this.rowData)
      this.$nextTick(() => {
        this.getBtnAuth()
      })
    },
    // 获取按钮权限
    getBtnAuth() {
      this.loading = true;
      this.$request({
        url: '/zy-api/api/per/find',
        method: 'post',
        data: {
          pageId: this.rowData.menuCode
        }
      }).then(res => {
        if (res.status == 200) {
          // console.log(res.data)
          this.btnList = res.data.filter(item => item.funcCode !== 'Authorized')
        } else {
          this.$message.error(`错误${res.status}：${res.errors}`)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 删除按钮权限
    delBtnAuth(btnData) {
      this.btnList = this.btnList.filter(item => item.funcId !== btnData.funcId)
      this.delBtnList.push(btnData)
      // console.log(this.delBtnList)
    },
    submit() {
      if (this.delBtnList.length == 0) {
        this.msgWarning(`未选择删除按钮权限！`)
        return false;
      }

      let params = {
        pageId: this.rowData.menuCode,
        childCode: this.rowData.menuCode,
        flg: 1,
        per: this.delBtnList
      }
      console.log(params)
      this.$request({
        url: '/zy-api/api/per/add',
        method: 'post',
        data: params
      }).then(res => {
        if (res.status == 200) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
        } else {
          this.$message.error(`错误${res.status}：${res.errors[0].message}`)
        }
      }).finally(() => {
        this.dialogVisible = false
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.btn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  .btn-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    &:hover {
      background-color: #eee;
    }
    .btn-name {
      flex: 1;
    }
    .del-btn {
    }
  }
}
.no-data {
  text-align: center;
  color: #bbbbbb;
}
</style>